<template>
  <el-container>

    <el-header>
        <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>猫猫管理</el-breadcrumb-item>
        <el-breadcrumb-item>猫猫信息</el-breadcrumb-item>
        </el-breadcrumb>
    </el-header>

    <el-container style="height: 100%; border: 1px solid #eee">
        <el-aside width="260px">
            <el-menu text-color="rgb(51,51,51)" router background-color="rgb(255,255,255)" default-active="/catinfo/maininfo" unique-opened>
                <el-menu-item index="/catinfo/maininfo"><i class="el-icon-document"></i>主要信息</el-menu-item>
                <el-menu-item index="/catinfo/feed"><i class="el-icon-menu"></i>饲养指南</el-menu-item>
                <el-menu-item index="/catinfo/morepic"><i class="el-icon-postcard"></i>查看更多</el-menu-item> 
            </el-menu>

            <div class="demo-image__placeholder">
                <div class="block" >
                    <img class="pic" src="../../assets/catinfo_img/1.jpg" alt="图片加载失败" >
                </div>
            </div>

            <div class="btn">
                <el-button type="primary" icon="el-icon-shopping-cart-2" @click="open_shopcar">在线预约</el-button>
                <el-button type="success" icon="el-icon-shopping-cart-full" @click="open_shoprightnow">相亲配种</el-button>
            </div>

            <div class="tag">
                <el-tag type="info">联系电话：8008208820</el-tag><br>
                <el-button type="info" plain @click="open_help">在线帮助</el-button>
            </div>
        </el-aside>

        <el-container>   
            <el-main>
                <router-view/>
            </el-main> 
            <el-footer> 
                <div class="btm">
                  喵管家
                </div>
            </el-footer>
        </el-container>

    </el-container>
  </el-container>
</template>

<script>
export default {
    methods: {
      open_shopcar() {
        this.$alert('即将前往在线预约界面', '操作确认', {
          confirmButtonText: '确定前往',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      open_shoprightnow() {
        this.$alert('即将前往相亲配种界面', '操作确认', {
          confirmButtonText: '确定前往',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      },
      open_help() {
        this.$alert('前往帮助中心？', '操作确认', {
          confirmButtonText: '确定购买',
          callback: action => {
            this.$message({
              type: 'info',
              message: `action: ${ action }`
            });
          }
        });
      }
    },
    data() {
      return {
        src: '../../assets/catinfo_img/1.jpg'
      }
    }

}
</script>

<style lang="less" scoped>
    .html,body{
        height: 100%;
    }
    .el-container{
        height: calc(100vh);
    }
    .el-breadcrumb{
        font-size: 22px;
        margin-top: 15px;
    }
    .el-header, .el-footer {
        background-color: #FFF0F5;
        color: #333;
        text-align: center;
        line-height: 40px; 
        border-bottom:3px solid rgb(250, 250, 250);
    }
    
    /* ----------------------------------------------------------------------------------- */
    .el-aside {
        background-color: #ffffff;
        color: rgb(241, 232, 232);
        line-height: 50px;
    }
    .el-menu-item{
        font-size: 20px;
    }
    .el-menu-item.is-active {
        color: #f8f8fa; 
        font-size: 23px;
        background-color: rgb(254,175,201)!important;
        border-bottom:2px solid rgb(238, 46, 190);
    }
    .demo-image__placeholder{
        padding-top: 60px;
    }
    .el-button--primary {
        background-color: #FF82AB;
        border-color: #f5f7f8;
    }
    .el-button--success{
        background-color: #FF82AB;
        border-color: #f5f7f8;
    }
     .btn{
         text-align:center;
    }
    .el-button{
        line-height:0;
        padding-left:10px;
        margin-top:20px;
    }
    .tag{
        padding-top: 20px;
        text-align: center;
    }
    /* ----------------------------------------------------------------------------------- */
    .el-main {
        background-color: #FFE4E1;
        color: #333;
    }
    .pic{
      width: 200px;
      padding-left: 30px;
    }
    /* ----------------------------------------------------------------------------------- */
    .btm{
      font-family: "STCaiyun";
      font-size: 30px;
      color:#FF3E96;
      text-decoration: none !important;
    }
</style>